// 建议用函数组件
// 路由懒加载
// 需要涉及到的模块或组件成员：
//    Suspense组件：有react包提供，是一个组件
//        语法：<Suspense fallback={加载提示内容、组件}>路由规则</Suspense>
//    lazy方法：由react提供，用于动态加载需要渲染的组件
//        语法：const 组件运行的变量名 = lazy(() => import("组件的路径"))

import React, { Suspense, lazy } from 'react';
import { Switch, Redirect, Route } from "react-router-dom"
import Loading from "../component/Loading"

const Login = lazy(() => import("../views/Login/index"))
const Dashboard = lazy(() => import("../views/backend/dashboard"))

const Index = () => {
  return (
    <Suspense fallback={ <Loading /> }>
      <Switch>
        <Redirect exact from="/" to="/login"></Redirect>
        <Route path="/login" component={Login}></Route>
        <Route path="/dashboard" component={Dashboard}></Route>
      </Switch>
    </Suspense>
  )
}

export default Index;
